import React, {Component} from 'react';
import 'antd/dist/antd.css'
import '../css/index.css';
import $ from 'jquery';
import {Route, Switch, Link} from 'react-router-dom';
import {config} from "../config";

import Home from './Home';
import ProductService from './ProductService';
import SolveRealty from './SolveRealty';
import SuccessfulCase from './SuccessfulCase';
import CustomizedService from './CustomizedService';
import News from './News';
import AboutUs from './AboutUs';
import NewsDetail from './NewsDetail';
import SuccessfulCaseDetail from './SuccessfulCaseDetail';

import { Provider} from "../store";

import phone from '../image/phone.png';
import companyLogo from '../image/companyLogo.png';


const path = config.path;

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentMenu:{
                num: 0
            },
            dispatch: (data) => {
                const state=this.state;
                const newState=Object.assign({},state,data);
                this.setState(newState);
            }
        }
    };

    routeList = [
        {component: Home, menu_path: '/index/home'},
        {component: ProductService, menu_path: '/index/productService'},
        {component: SolveRealty, menu_path: '/index/solveRealty'},
        {component: SuccessfulCase, menu_path: '/index/successfulCase'},
        {component: CustomizedService, menu_path: '/index/customizedService'},
        {component: News, menu_path: '/index/news'},
        {component: AboutUs, menu_path: '/index/aboutUs'},
        {component: NewsDetail, menu_path: '/index/NewsDetail/:id'},
        {component: SuccessfulCaseDetail, menu_path: '/index/successfulCaseDetail/:id'}
    ];

    render() {
        const {num} = this.state;
        return (
            <Provider value={this.state}>
                <div>
                    <div className="header">
                        <div className="headerContainer">
                            <div className="logoStyle">
                                <img src={companyLogo} alt="logo"></img>
                            </div>
                            <div className="navigationContainer">
                                <ul>
                                    <li className={num === 0 ? "active" : ""}>
                                        <Link to={path + "/index/home"}>首页</Link>
                                    </li>
                                    <li onMouseOver={(e) => this.handleMouseOver(e)}
                                        onMouseLeave={(e) => this.handleMouseLeave(e)}
                                        className={num === 1 ? "active" : ""}>
                                        <Link to={path + "/index/productService"}>产品服务</Link>
                                    </li>
                                    <li onMouseOver={(e) => this.handleMouseOver(e)}
                                        onMouseLeave={(e) => this.handleMouseLeave(e)}
                                        className={num === 2 ? "active" : ""}>
                                        <Link to={path + "/index/solveRealty"}>行业方案</Link>
                                    </li>
                                    <li className={num === 3 ? "active" : ""}>
                                        <Link to={path + "/index/successfulCase"}>成功案例</Link>
                                    </li>
                                    <li onMouseOver={(e) => this.handleMouseOver(e)}
                                        onMouseLeave={(e) => this.handleMouseLeave(e)}
                                        className={num === 4 ? "active" : ""}>
                                        <Link to={path + "/index/customizedService"}>服务定制</Link>
                                    </li>
                                    <li onMouseOver={(e) => this.handleMouseOver(e)}
                                        onMouseLeave={(e) => this.handleMouseLeave(e)}
                                        className={num === 5 ? "active" : ""}>
                                        <Link to={path + "/index/news"}>博客/资讯</Link>
                                    </li>
                                    <li onMouseOver={(e) => this.handleMouseOver(e)}
                                        onMouseLeave={(e) => this.handleMouseLeave(e)}
                                        className={num === 6 ? "active" : ""}>
                                        <Link to={path + "/index/aboutUs"}>关于我们</Link>
                                    </li>
                                </ul>
                            </div>
                            <div className="contactContainer">
                                <img src={phone} alt="phone"></img>
                                <span style={{fontSize: 16, color: '#999', marginLeft: 10}}>服务热线：</span>
                                <span style={{fontSize: 16, marginLeft: 10}}>0757 8623 1051</span>
                            </div>
                        </div>
                    </div>
                    <div className="mouseOverContainer">
                        <Switch>
                            {
                                this.routeList.map((item, index) => {
                                    return <Route key={index} path={path + item.menu_path}
                                                  component={item.component}/>
                                })
                            }
                            <Route path={"/"} component={Home}/>
                        </Switch>
                    </div>
                    <div className="indexFooter">
                        <div style={{width: 1280, margin: '0 auto', display: 'flex', paddingTop: 40}}>
                            <div className="indexFooterItem">
                                <ul>
                                    <li>产品与服务</li>
                                    <li>智慧社区</li>
                                    <li>社区超市</li>
                                    <li>预约系统</li>
                                    <li>外卖平台</li>
                                </ul>
                            </div>
                            <div className="indexFooterItem">
                                <ul>
                                    <li>服务定制</li>
                                    <li>定制系统</li>
                                    <li>小程序开发</li>
                                    <li>OA办公系统开发</li>
                                    <li>商城开发</li>
                                    <li>APP开发</li>
                                    <li>微信开发</li>
                                </ul>
                            </div>
                            <div className="indexFooterItem">
                                <ul>
                                    <li>解决方案</li>
                                    <li>快消行业</li>
                                    <li>地产行业</li>
                                    <li>政务环保</li>
                                    <li>厂内物流</li>
                                </ul>
                            </div>
                            <div className="indexFooterItem">
                                <ul>
                                    <li>关于我们</li>
                                    <li>公司简介</li>
                                    <li>发展历程</li>
                                    <li>荣誉资质</li>
                                    <li>联系我们</li>
                                </ul>
                            </div>
                            <div className="indexFooterItem">
                                <img src={companyLogo} alt="contact"/>
                            </div>
                        </div>
                    </div>
                </div>

            </Provider>
        )
    };

    componentDidMount() {

    }

    /**
     * 鼠标事件覆盖事件
     */
    handleMouseOver(e) {
        $($(e.currentTarget).find('.mouseOverItem')).stop();
        $($(e.currentTarget).find('.mouseOverItem')).slideDown(500);
    };

    /**
     * 鼠标离开事件
     */
    handleMouseLeave(e) {
        $($(e.currentTarget).find('.mouseOverItem')).stop();
        $($(e.currentTarget).find('.mouseOverItem')).slideUp(500);
    };

    /**
     * 跳转页面事件
     * @param src
     */
    handleRedirect(src) {
        const url = path + '/index/' + src;
        this.props.router.push(url);
    }
}

export default Index;
